<template>
  <cloud-dialog
    :visible="visible"
    :title="title"
    :width="480"
    :mask-closable="false"
    :before-ok="handleSubmit"
    :before-open="handleBeforeOpen"
    :before-close="handleBeforeClose">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      layout="vertical"
      class="!w-full">
      <a-form-item
        field="suffix"
        label="文件后缀"
        hide-asterisk
        asterisk-position="end"
        required>
        <a-textarea
          v-model="formState.suffix"
          placeholder="请输入文件后缀，多个值用英文逗号隔开，区分大小写"
          :auto-size="{
            minRows: 5,
            maxRows: 5
          }"
          :max-length="200"
          show-word-limit></a-textarea>
      </a-form-item>
      <a-form-item
        field="cache_time"
        label="缓存时间"
        hide-asterisk
        asterisk-position="end"
        :rules="{ required: true, message: '请输入缓存时间' }"
        required>
        <section class="w-full cloud-diverse-select">
          <a-input-number
            v-model="formState.cache_time"
            :min="1"
            :max="formState.cache_unit === 'd' ? 365 : 99999"
            :controls="false"
            :step="1"
            :precision="0"
            placeholder="请输入"
            class="flex-1">
            <template #append>
              <a-select
                v-model="formState.cache_unit"
                class="!w-78px"
                :options="cacheTimeOptions">
              </a-select>
            </template>
          </a-input-number>
        </section>
      </a-form-item>
    </a-form>
  </cloud-dialog>
</template>
<script lang="ts" setup>
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
interface IProps {
  record?: any
  visible: boolean
  isAdd?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  isAdd: false
})
interface IEmits {
  (e: 'update:visible', value: boolean): void
  (e: 'refresh'): void
  (e: 'save', value: any): void
}
const emits = defineEmits<IEmits>()
const title = computed(() => (props.isAdd ? '创建规则' : '编辑规则'))
const formRef = ref<FormInstance>()
const formState = ref({
  suffix: '',
  cache_time: 1,
  cache_unit: 'd'
})
const rules = computed<Record<string, FieldRule[]>>(() => {
  const res: Record<string, FieldRule[]> = {
    suffix: [
      { required: true, message: '请输入文件后缀' },
      {
        validator: validateSuffix
      }
    ]
  }
  return res
})
// 所有标题
// const allNames = computed(() => props.record.map((item: any) => item.name!))
// 所有文件类型
// const allFileExt = computed(() => {
//   const arr: string[] = []
//   props.record.forEach((item: any) => arr.push(...item.suffix.split(',')))
//   return arr
// })
const handleBeforeOpen = async () => {
  if (props.record) {
    Object.assign(formState.value, props?.record)
    formState.value.cache_time = +formState.value.cache_time
  }
}
const handleBeforeClose = async () => {
  await formRef.value?.resetFields()
  emits('update:visible', false)
}
async function handleSubmit() {
  const error = await formRef.value?.validate()
  if (error) return false
  const data = { ...formState.value }
  emits('save', data)
}
</script>

<style lang="less" scoped></style>
